<template>
  <div class="container">
    <div class="select"></div>
    <div class="content">
      <div class="wrapper">
        <div class="title">发帖到其他版块</div>
        <close-btn @close="handlePropClose"></close-btn>
        <div class="chosen">
          <div class="left">
            <h4>选择分类</h4>
            <ul v-for="item in list" :key="item.id">
              <li ref="left" :class="[styles]" @click="handleListShow(item,$event)">{{item.title}}</li>
            </ul>
          </div>

          <div class="right">
            <h4>选择板块</h4>
            <ul v-for="child in childrenList" :key="child.id">
              <li ref="right" :class="[styles]" @click="handleChildShow(child,$event)">{{child.title}}</li>
            </ul>
          </div>

        </div>

        <div class="clickInfo">
          发帖到：
          {{chosenItem.father.text}}
          <i class="el-icon-arrow-right" v-show="chosenItem.father.text"></i>
          {{chosenItem.children.text}}
        </div>

        <div class="confirm" @click="getThemeChosed">确定</div>
      </div>
    </div>
  </div>

</template>

<script>
import axios from 'axios';
import CloseBtn from 'common/close/Close.vue';
export default {
  name: 'HeaderSelect',
  inject: ['reload'],
  components: {
    CloseBtn
  },
  data () {
    return {
      list: {},
      childrenList: {},
      chosenItem: {
        father: {
          text: '',
          id: ''
        },
        children: {
          text: '',
          id: ''
        }
      },
      styles: 'listItem',
      showme: false
    }
  },
  mounted () {
    this.getListInfo();
  },
  methods: {
    getListInfo () {
      const _this = this;
      axios.get('/api/source/home.json').then(function(response){
        if(response.data.ret && response.data.data){
          _this.list = response.data.data;
        }
      });
    },
    handleListShow (item, el) {
      this.childrenList = item.children;
      this.$refs.left.map(function(item){
        item.className = 'listItem';
      });
      el.target.className = 'listItem chosed';
      this.chosenItem.father.text = el.target.innerText;
      this.chosenItem.father.id = item.id;
    },
    handleChildShow (child, el) {
      this.$refs.right.map(function(item){
        item.className = 'listItem';
      });
      el.target.className = 'listItem childChosen';
      this.chosenItem.children.text = el.target.innerText;
      this.chosenItem.children.id = child.id;
    },
    getThemeChosed () {
      if (this.chosenItem.children.text && this.chosenItem.father.text){
        this.$router.push({name: 'Create', query:{
          data:this.chosenItem.children.id
        }});
        this.reload();
        this.$emit('close');
        this.$refs.left.map(function(item){
          item.className = 'listItem';
        });
        this.$refs.right.map(function(item){
          item.className = 'listItem';
        });
        this.chosenItem.children.text = '';
        this.chosenItem.father.text = '';
      }
    },
    handlePropClose () {
      this.$emit('close');
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/variables.styl';
  .container
    position: relative
    right: 0
    .select:before
      content: ""
      position: absolute
      right: .61rem
      margin-top: -.24rem
      border-bottom: .12rem solid #fff
      border-top: .12rem solid transparent
      border-left: .12rem solid transparent
      border-right: .12rem solid transparent
      z-index: 12
    .select:after
      content: ""
      position: absolute
      right: .6rem
      margin-top: -.3rem
      border-bottom: .15rem solid $font-gray
      border-top:.15rem solid transparent
      border-left:.14rem solid transparent
      border-right:.14rem solid transparent
      z-index: 10
    .select 
      position: absolute
      background: #fff
      z-index: $alert-index
      height: 6.3rem
      width: 7.6rem
      box-shadow: 0 .02rem .02rem .02rem $font-gray 
      right: 0
      margin-top: $headerHeight
    .content
      position: absolute
      z-index: $alert-text
      color: #333
      height: 6.3rem
      width: 7.6rem
      right: 0
      margin-top: $headerHeight
      .wrapper
        margin: .3rem .48rem
        display: flex
        flex-direction: column
        justify-content: space-around
        .title
          width: 100%
          color: $font-welcome
          font-weight: bold
          font-size: .24rem
          height: .4rem
          line-height: .4rem
          margin-bottom: .15rem
        .chosen
          display: flex
          justify-content: space-between
          .left,.right
            height: 3.6rem
            width: 3rem
            border: .01rem solid $borderColor
          h4
            font-weight: bold
            color: #333
            font-size: .26rem
            height: .5rem
            line-height: .5rem
            margin: .1rem .2rem
          ul
            margin-left: .2rem
            display: flex
            flex-direction: column
            .listItem
              font-size: .26rem
              color: $font-welcome
              height: .4rem
              line-height: .4rem
              margin: .08rem 0
              padding-left: .1rem
              width: 2.2rem
              cursor: pointer
            .chosed
              color: #fff
              background: linear-gradient(to right,#237bcd , #83b9e6)
            .chosed:before
              content: ""
              position: absolute
              border-bottom: .2rem solid #fff
              border-top: .1rem solid transparent
              border-left: .3rem solid transparent
              border-right: 0rem solid transparent
              left: 2.69rem
              margin-top: .1rem
            .chosed:after
              content: ""
              position: absolute
              border-top: .2rem solid #fff
              border-bottom: .1rem solid transparent
              border-right: 0rem solid transparent
              border-left: .3rem solid transparent 
              left: 2.69rem
            .childChosen
              color: #fff
              background: linear-gradient(to right,#237bcd , #83b9e6)
              width: 2rem
        .clickInfo
          height: .6rem
          line-height: .6rem  
          margin: .2rem 0
          background: #ecf3f8
          padding-left: .2rem
          color: #333
        .confirm
          position: absolute
          height: .5rem
          line-height: .5rem
          text-align: center
          width: 1.2rem
          left: 50%
          margin-left: -.6rem
          bottom: .3rem
          background: linear-gradient(to bottom, #50a1d3 , #0c497c)
          border: .01rem solid #438cf9
          border-radius: .1rem
          color: #fff
          font-size: .26rem
          cursor: pointer
        .confirm:hover
          background: linear-gradient(to bottom, #458ecb , #0c497c) 
</style>